<template>
  <div class="context">


    <template>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="个人信息" name="first">
          <div>
            <div class="item">
              我的余额：{{ money }} <el-button @click="showinfo">去提现</el-button>
            </div>

            <div class="item">
              累计提现：{{ userinfo.totalMoney }} 
            </div>

            <div class="item">
              预计分佣：{{ shareMoney }} 
            </div>


            <div class="item">
              我绑定的设备：{{ dev }} <el-button v-if="imei" @click="delDev">解绑</el-button>
            </div>

            <div class="item" >
              我的小程序名称：{{ userinfo.xcxName }} <input  v-model="xcxname"/>     <el-button @click="addName">填写/修改</el-button>
            </div>

            <div class="item">
              我邀请的数量：{{ customerCount }}
            </div>

            <div class="item" v-if="isInviteId==false">
              邀请码填写：<input  v-model="inviteId"/>     <el-button @click="open">填写</el-button>
            </div>

            <div class="item" v-if="isInviteId==true">
              邀请码人：{{ inviteId }}
            </div>

            <div class="item">
              我的邀请码：{{userid}}
            </div>

            <div class="item">
                <el-tag  v-show="userinfo.invite == 0" effect="dark">分润状态:未开启</el-tag>
              <span v-show="userinfo.invite!= 0">分佣截至时间{{ timestampToTime(userinfo.invite) }}</span>
              <div style="color:rgb(19, 58, 141)">说明：(启用将享受被邀请者10%收益,收益将在被邀请者提现时到账。请联系上级开启)</div>
            </div>

          </div>
        </el-tab-pane>

        <el-tab-pane label="提现记录" name="second">
          <el-table :data="data" style="width: 100%" height="450px">
            <el-table-column type="index" width="50">
            </el-table-column>

            <el-table-column label="提现日期">
              <template slot-scope="scope">
                <span>{{ scope.row.time }}</span>
              </template>
            </el-table-column>


            <el-table-column label="提现金额">
              <template slot-scope="scope">
                <span>{{ scope.row.money }}</span>
              </template>
            </el-table-column>

            <el-table-column label="提现信息">
              <template slot-scope="scope">
                <span>{{ scope.row.info }}</span>
              </template>
            </el-table-column>

            <el-table-column label="拒绝理由">
              <template slot-scope="scope">
                <span>{{ scope.row.reason }}</span>
              </template>
            </el-table-column>


            <el-table-column label="状态">
              <template slot-scope="scope">
                <!-- <span>{{ scope.row.status }}</span> -->
                <el-tag v-if="scope.row.status == 0">待审核</el-tag>
                <el-tag type="success" v-if="scope.row.status == 1">已打款</el-tag>
                <el-tag type="danger" v-if="scope.row.status == 2">拒绝申请</el-tag>
              </template>
            </el-table-column>

          </el-table>
        </el-tab-pane>

        <el-tab-pane label="我的邀请" name="third">
          <el-table  :data="customer"   v-model="customer" style="width: 100%" height="450px">
            <el-table-column type="index" width="50">
            </el-table-column>

            <el-table-column label="用户">
              <template slot-scope="scope">
                <span>{{ scope.row.userid }}</span>
              </template>
            </el-table-column>


            <el-table-column label="累计提现">
              <template slot-scope="scope">
                <span>{{ scope.row.totalMoney }}</span>
              </template>
            </el-table-column>

            <el-table-column label="我的预计分润">
              <template slot-scope="scope">
                <span>{{ scope.row.totalMoney/10 }}</span>
              </template>
            </el-table-column>

          </el-table>
        </el-tab-pane>

      </el-tabs>
    </template>

    <template>
    <el-dialog
      title="提现申请"
      :visible.sync="dialogresetVisible"
      width="30%"
      center
    >
      <el-form :model="newtable">
        <el-form-item label="支付宝账号">
        <el-input v-model="zfbnum"></el-input>
      </el-form-item>

      <el-form-item label="支付宝真实姓名">
        <el-input v-model="realname"></el-input>
      </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogresetVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendCash">确 定</el-button>
      </div>
    </el-dialog>
  </template>

  </div>
</template>

<script>
export default {
  data() {
    return {
      xcxname:"",//小程序名称
      shareMoney:0,
      userinfo:"",//个人信息
      isInviteId:false,//用户信息
      inviteId:"",//填写邀请人
      customer:[],//我的客户
      customerCount:0,//我的客户数量
      dev:"暂未绑定设备(账号运行第一台设备自动绑定)",
      imei:null,
      realname: "",
      zfbnum: "",
      activeName: 'first',
      money: "0",
      userid: "",
      data: [],
      formLabelWidth: "120px",
      newtable: {
        header: "",
        begin: "",
        end: ""
      },
      dialogresetVisible: false,
      pagecount: 99,//查询的总数
      currentPage4: 4,
      Users: [],//用户数据数组
      req: {
        "pageIndex": 0,
        "pageCount": 10
      }
    };
  },

  created() {
    var that = this;
    var info = JSON.parse(localStorage.getItem("info"))
    if (info) {
      that.userid = info.userid
      console.log(info.userid);
    }
    this.selectById()
    this.selectRecord()
   this.getMyCustomer()
  },
  methods: {
    addRecommend(){
      var that = this;
      this.$axios.post("/api/User/addRecommend", {
        "userid": that.userid,
        "recommend":that.inviteId
      })
        .then(function (response) {
          console.log(response.data);
          if (response.data.code == 200) {
            that.$message({
            message:response.data.mes
          });
          } else {
          console.log(response.data)
          }
        })
    },
    open() {
      var that=this
      var mes='是否将'+that.inviteId +"填写为你的邀请人,此操作不更更改！"
        this.$confirm(mes, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.addRecommend()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getMyCustomer(){
      var that = this;
      this.$axios.post("/api/User/ShowMyCustomer", {
        "userid": that.userid,
      })
        .then(function (response) {
          console.log(response.data);
          if (response.data.code == 200) {
            that.customer=response.data.data
            that.customerCount=response.data.data.length
            console.log(response.data.data)
            var total=0
            for (let index = 0; index < that.customer.length; index++) {
              total=total+((that.customer[index].totalMoney)/10)
            }
            that.shareMoney=total
            console.log(that.shareMoney);
          } else {
          console.log(response.data)
          }
        })
    },
    delDev(){
      var that = this;
      this.$axios.post("/api/User/DelDev", {
        "userid": that.userid,
      })
        .then(function (response) {

          console.log(response.data);
          if (response.data.code == 200) {
            that.$message.success(response.data.mes);
          } else {
            that.$message.error(response.data.mes);
          }
        })
        .catch(function (error) {
          that.$message.error('网络链接超时！');
          console.log(error);
        });
    },
    showinfo(){
      this.dialogresetVisible =true
    },
    sendCash() {
      if(this.zfbnum==""){
        
        this.$message({
            message: "请输入支付宝账号及姓名"
          });
          return 
      }

      if(this.money<=30){
        
        this.$message({
            message: "余额小于30 暂时无法提现！"
          });
          return 
      }
      
      var that = this;
      that.$axios
        .post("/api/Money/sendCashRecord", {
          iphone: that.userid,
          money: that.money,
          info:"支付宝账号:"+that.zfbnum+" 真实姓名:"+that.realname
        })
        .then(function (response) {
          console.log(response.data);
          that.dialogresetVisible=false
          that.$message.success({
            message: response.data.mes
          });
        })
        .catch(function (error) {
          console.log(error);
          that.$message({
            message: "操作失败"
          });
        });
     
    },

    addName(){
      var that = this;
      this.$axios.post("/api/User/addXcxName", {
        "userid": that.userid,
        "name":that.xcxname
      })
        .then(function (response) {

          console.log(response.data);
          if (response.data.code == 200) {
            that.data = response.data.data
            that.$message.success(response.data.mes);
          } else {
            that.$message.error(response.data.mes);
          }
        })
    },
    selectRecord() {
      var that = this;
      this.$axios.post("/api/Money/getCashRecord", {
        "userid": that.userid,
        "pageIndex": that.req.pageIndex,
        "pageCount": that.req.pageCount,
      })
        .then(function (response) {

          console.log(response.data);
          if (response.data.code == 200) {
            that.data = response.data.data
          } else {
            that.$message.error(response.data.mes);
          }
        })
    },
    selectById() {
      var that = this;
      this.$axios.post("/api/User/show", {
        "userid": that.userid,
        "pageIndex": that.req.pageIndex,
        "pageCount": that.req.pageCount,
      })
        .then(function (response) {
          that.userinfo=response.data.data[0]
          console.log("1111"+response.data.data[0]);
          if (response.data.code == 200) {
            if(response.data.data[0].recommend){
              that.isInviteId=true
              that.inviteId=response.data.data[0].recommend
            }
            
            that.money = response.data.data[0].money
            if(response.data.data[0].model){
              that.dev=response.data.data[0].model
            }
            that.imei=response.data.data[0].imei
        
          } else {
            that.$message.error(response.data.mes);
          }
        })
        .catch(function (error) {
          that.$message.error('网络链接超时！');
          console.log(error);
        });
    },
    next(a) {
      console.log(a);
    },
    reset() {
      this.req = {
        "pageIndex": 0,//每次请求数据的开始位置
        "pageCount": 1//每次请求数据的总量
      }
    },
    timestampToTime(timestamp) {
      // 时间戳为10位需*1000，时间戳为13位不需乘1000
      var date = new Date(timestamp * 1000);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    },


  }
};
</script>

<style scoped>
.item {
  margin: 20px;
}
</style>
